/*
 * @Descripttion: 多画面播放类型定义
 * @version: V1.0.0.0
 * @Author: zhaozhenzhuo
 * @Date: 2025-01-10 13:18:17
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-02-18 15:22:23
 */
import FlvPlugin from 'xgplayer-flv';
import HlsPlugin from 'xgplayer-hls';
import Player from 'xgplayer';

// 播放器基本参数信息
export const PLAYER_CONFIG = {
	SUPPORTED_TYPES: ['flv', 'hls', 'mp4'] as const,
	DEFAULT_VERTICAL_ALIGN: ['top', 'bottom', 'center'] as const,
	DEFAULT_HORIZONTAL_ALIGN: ['left', 'right', 'center'] as const,
	DEFAULT_DISPLAY_MODE: ['pave', 'pic_in_pic'] as const,
	DEFAULT_SHOW_TYPE: ['width', 'height'] as const
} as const;

// 基本参数类型定义
export type SupportedType = (typeof PLAYER_CONFIG.SUPPORTED_TYPES)[number];
export type DisplayMode = (typeof PLAYER_CONFIG.DEFAULT_DISPLAY_MODE)[number];
export type ShowType = (typeof PLAYER_CONFIG.DEFAULT_SHOW_TYPE)[number];
export type VerticalAlign = (typeof PLAYER_CONFIG.DEFAULT_VERTICAL_ALIGN)[number];
export type HorizontalAlign = (typeof PLAYER_CONFIG.DEFAULT_HORIZONTAL_ALIGN)[number];

// 多画面播放传入参数原始接口
export interface MultiPlayerOptions {
	type: SupportedType;
	id?: string;
	el?: HTMLElement;
	urlList: UrlListOptionsRequireOne[];
	isLive?: boolean;
	width?: number;
	height?: number;
	maxWidth?: number;
	maxHeight?: number;
	verticalAlign?: VerticalAlign;
	horizontalAlign?: HorizontalAlign;
	gap?: number;
	borderStyle?: string;
	autoplay?: boolean;
	currentTime?: number;
	enableVolumeMemory?: boolean;
	errorTips?: string;
	endTips?: string;
	progressDot?: ProgressDotOptions[];
	watermarkText?: string;
	preloadTime?: number;
	switchCallback?: (playerList: PlayerListOptions[]) => void;
	seekingCallback?: (id: string, currentTime: number) => void;
	commonStyle?: {
		progressColor?: string;
		playedColor?: string;
		cachedColor?: string;
		sliderBtnStyle?: Partial<Pick<CSSStyleDeclaration, keyof CSSStyleDeclaration>>;
		volumeColor?: string;
		playbackRateColor?: string;
	};
}

// 多画面播放传入参数接口 - 要求 width 和 height 至少提供一个
export type MultiPlayerOptionsRequireOne =
	| (Omit<MultiPlayerOptions, 'width'> & Required<Pick<MultiPlayerOptions, 'width'>>)
	| (Omit<MultiPlayerOptions, 'height'> & Required<Pick<MultiPlayerOptions, 'height'>>);

// 视频源
export interface UrlListOptions {
	id: string;
	url?: string;
	borderStyle?: string;
	placeholder?: string;
	deviationTime?: number;
	currentTime?: number;
	hasVol?: boolean;
	progressDot?: ProgressDotOptions[];
}

// 视频源接口 - 要求 url 和 placeholder 至少提供一个
export type UrlListOptionsRequireOne =
	| (Omit<UrlListOptions, 'url'> & Required<Pick<UrlListOptions, 'url'>>)
	| (Omit<UrlListOptions, 'placeholder'> & Required<Pick<UrlListOptions, 'placeholder'>>);

// 打点列表
export interface ProgressDotOptions {
	time: number;
	text?: string;
	duration?: number;
	style?: Record<string, string | number>;
}

// 播放器对象列表
export interface PlayerListOptions extends UrlListOptions {
	player?: Player;
	isLarge?: boolean;
	timer?: number | null;
	root?: HTMLElement;
	_playEvent?: (() => void) | null;
	_pauseEvent?: ((e: HTMLVideoElement) => void) | null;
	_seekedEvent?: (() => void) | null;
	_dbclickEvent?: (() => void) | null;
	_clickEvent?: ((e: Event) => void) | null;
	_canplayEvent1?: (() => void) | null;
	_endedEvent?: (() => void) | null;
	_errorEvent?: ((err: any) => void) | null;
	_volumeChangeEvent?: (() => void) | null;
	_rateChangeEvent?: (() => void) | null;
	_readyEvent?: (() => void) | null;
	_canplayEvent2?: (() => void) | null;
	_autoplaypreventedEvent?: (() => void) | null;
	_timeupdateEvent?: (() => void) | null;
	_timeupdateCallback?: (() => void) | null;
	_seekingEvent?: (() => void) | null;
}

// 多画面播放内部使用参数接口
export interface MultiPlayerClassOptions extends MultiPlayerOptions {
	el: HTMLElement;
	gap: number;
	isLive: boolean;
	autoplay: boolean;
	displayMode: DisplayMode;
	showType: ShowType;
	classList: { className: string; usedId: string; isLarge: boolean }[];
	playerList: PlayerListOptions[];
	isFullscreen: boolean;
	errorTips: string;
	endTips: string;
	syncInterval: ReturnType<typeof setInterval> | null;
	hasVol: boolean;
	originHasVol: boolean;
	enableVolumeMemory: boolean;
	isDragging: boolean;
	resizeObserverArr: ResizeObserver[];
}

// 多画面播放器样式对象
export interface PlayerSizeObj {
	largeTop: number;
	largeLeft: number;
	largeWidth: number;
	largeHeight: number;
	small1Top: number;
	small1Right: number;
	small1Width: number;
	small1Height: number;
	small2Bottom: number;
	small2Right: number;
	small2Width: number;
	small2Height: number;
	small3Bottom: number;
	small3Right: number;
	small3Width: number;
	small3Height: number;
	small4Bottom: number;
	small4Right: number;
	small4Width: number;
	small4Height: number;
	small5Bottom: number;
	small5Right: number;
	small5Width: number;
	small5Height: number;
}

// 创建播放器参数对象
export interface PlayerOptions {
	el: HTMLElement;
	url: string;
	autoplay: boolean;
	width: string;
	height: string;
	isLive: boolean;
	volume: { default: number; miniVolume: number };
	plugins?: (typeof FlvPlugin | typeof HlsPlugin)[];
	playsinline: boolean;
	closeVideoClick: boolean;
	startTime: number;
	progressDot?: ProgressDotOptions[];
	preloadTime?: number;
	commonStyle?: {
		progressColor?: string;
		playedColor?: string;
		cachedColor?: string;
		sliderBtnStyle?: Partial<Pick<CSSStyleDeclaration, keyof CSSStyleDeclaration>>;
		volumeColor?: string;
		playbackRateColor?: string;
	};
}
